<template>

    <el-container>
      <el-aside width="200px">
          <div><img src="../assets/logo.png" alt=""></div>
            <el-menu :default-openeds="['1', '3']">
        <el-sub-menu index="1">
          <template #title
            ><i class="el-icon-odometer"></i>仪表盘</template
          >
          
         
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title><i class="el-icon-menu"></i>常用设置</template>
          <el-menu-item-group>
           
            <el-menu-item index="2-1">教师管理</el-menu-item>
            <el-menu-item index="2-2">学生管理</el-menu-item>
          </el-menu-item-group>
          
            <el-menu-item index="2-3">公告管理</el-menu-item>
            <el-menu-item index="2-3">系统配置</el-menu-item>
            <el-menu-item index="2-3">判断服务器</el-menu-item>
         
          
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title
            ><i class="el-icon-aim"></i>问题</template
          >
          <el-menu-item-group>
          
            <el-menu-item index="3-1">问题列表</el-menu-item>
            <el-menu-item index="3-2">增加题目</el-menu-item>
            <el-menu-item index="3-3">导入导出题目</el-menu-item>
          </el-menu-item-group>
          
          
        </el-sub-menu>
                <el-sub-menu index="4">
          <template #title
            ><i class="el-icon-trophy"></i>比赛&练习</template
          >
          <el-menu-item-group>
           
            <el-menu-item index="4-1">比赛列表</el-menu-item>
            <el-menu-item index="4-2">创建比赛</el-menu-item>
          </el-menu-item-group>
         
          </el-sub-menu>
        
                <el-sub-menu index="5">
          <template #title
            ><i class="el-icon-collection"></i>课程</template
          >
          <el-menu-item-group>
            
            <el-menu-item index="5-1">课程列表</el-menu-item>
            <el-menu-item index="5-2">创建列表</el-menu-item>
          </el-menu-item-group>
          
          </el-sub-menu>
        
      </el-menu>


      </el-aside>
      <el-container>
        <el-header class="a">第一个使用布局的页面</el-header>
        <el-main class="b">这里是主体内容，可以使用组件，也可以写html</el-main>
        <el-footer class="c">Wed前端实战开发课程版权所有</el-footer>
      </el-container>
    </el-container>
</template>

<script>
export default{
    name:'hello',
    data(){
        return{
            message:"aaa"
        }
    }
}
</script>
<style scoped>
    .a{
        background-color:#F9FaFc;
    }
    .b{
        background-color: #EDECEC;
    }
    .c{
        background-color: #EDECEC;
    }
</style>